<template>
	<view class="content">
		<cos-header title="导航栏组件" :background-color="backgroundColor" :font-color="fontColor" :fixed="fixed">
		</cos-header>
		<image src="/static/sync_bg.jpg" mode="" style="width: 100vw;"></image>
		<div v-for="item in 100" :key="item">
			{{ item }}
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroundColor: '',
				fontColor: '#fff',
				fixed: true,
			}
		},
		onPageScroll(e) {
			console.log('e', e.scrollTop)
			if (e.scrollTop < 5) {
				this.fontColor = '#fff'
				this.backgroundColor = ''
			} else if (e.scrollTop < 50) {
				const rate = e.scrollTop / 50
				this.backgroundColor = `rgba(255,255,255, ${rate})`
				this.fontColor = `rgba(0,0,0, ${rate})`
			} else {
				this.backgroundColor = 'rgba(255,255,255)'
				this.fontColor = 'rgba(0,0,0)'
			}
		}
	}
</script>

<style>

</style>